<template>
  <q-page class='fit column q-pa-md q-gutter-y-md'>
    <q-breadcrumbs>
      <q-breadcrumbs-el to='/orders' label='我的订单' v-if='store.isUser' />
      <q-breadcrumbs-el to='/order_manage' label='订单管理' v-else-if='store.isAdmin' />
      <q-breadcrumbs-el label='订单详情' />
    </q-breadcrumbs>

    <template v-if='!order&&!loading'>
      <div class='flex-center text-h3 fit'>
        暂无此订单信息，请检查ID是否输入正确
      </div>
    </template>

    <template v-else-if='!loading'>
      <!--订单详细信息-->
      <q-card class='text-body1 flex'>
        <q-item>订单编号：{{ id }}</q-item>
        <q-item>货物名称：{{ order?.goodsName }}</q-item>
        <q-item>货物类型：{{ mapGoodsType(order?.goodsType) }}</q-item>
        <q-item>货物重量：{{ order?.goodsWeight }} kg</q-item>
        <q-item>货物体积：{{ order?.goodsVolume }} m³</q-item>
        <q-item>预估价格：￥{{ order?.goodsValue }}</q-item>
        <q-item>发货人：{{ order?.senderUsername }}</q-item>
        <q-item>收货人：{{ order?.receiverUsername }}</q-item>
        <q-item>发货地址：{{ order?.originLocation }}</q-item>
        <q-item>收货地址：{{ order?.destinationLocation }}</q-item>
      </q-card>
      <!--订单状态一览-->
      <OrderStatus :order='order' />
      <!--分配司机车辆-->
      <template v-if='order?.status===0 && store.isAdmin'>
        <Allocate :id='id' />
      </template>
      <!--地图-->
      <Map :source='order?.originLocation' :destination='order?.destinationLocation' />
      <!--确认收货-->
      <template v-if='canReceive'>
        <div class='flex flex-center'>
          <q-btn label='确认收货' @click='receive' style='width: 200px' color='primary' size='lg' />
        </div>
      </template>
    </template>

  </q-page>
</template>

<script lang='ts'>
import { computed, defineComponent, onActivated, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getAdminOrderDetail, getOrderDetail, setMessages } from 'src/services/api';
import { OrderDetail } from 'app/typings';
import { receiveOrder } from 'src/services/api';
import { Notify } from 'quasar';
import OrderStatus from 'components/OrderStatus.vue';
import { pinia } from 'boot/config';
import { useStore } from 'src/status';
import Allocate from 'components/Allocate.vue';
import Map from 'components/Map.vue';
import { mapGoodsType } from 'src/services/mapper';

export default defineComponent({
  name: 'OrderDetail',
  components: { Map, Allocate, OrderStatus },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore(pinia);

    const order = ref<OrderDetail>();
    const loading = ref(true);
    const id = ref(0);

    const canReceive = computed(() => order.value?.status === 2
      && store.isUser
      && store.name === order.value?.receiverUsername);

    const getData = async () => {
      loading.value = true;
      try {
        id.value = parseInt(route.query.id as string);
        if (store.isUser) {
          order.value = await getOrderDetail(id.value);
        } else if (store.isAdmin) {
          order.value = await getAdminOrderDetail(id.value);
        }
      } catch (error) {
      }
      loading.value = false;
      await setMessages();
    };

    onActivated(async () => {
      await getData();
    });

    onMounted(async () => {
      await getData();
    });

    const receive = async () => {
      try {
        const result = await receiveOrder(id.value);
        if (result.status === 0) {
          Notify.create({ message: '签收成功', type: 'positive', position: 'top' });
          setTimeout(() => {
            return;
          }, 1000);
          await router.replace('/orders');
        }
      } catch (error) {
      }
    };

    return {
      order,
      loading,
      receive,
      store,
      canReceive,
      id,
      mapGoodsType
    };
  }
});
</script>
<style scoped lang='scss'>
.q-item {
  width: 33.33%;
}
</style>
